<template>
    <div class="posters_container">
        <el-form ref="formRef" :model="formData" :rules="formRules" label-width="112px" :disabled="pageType == 'look'">
            <el-form-item label="页面标题" prop="page_name">
                <el-input
                    v-model="formData.page_name"
                    class="w400"
                    maxlength="10"
                    show-word-limit
                    placeholder="请输入" />
            </el-form-item>
            <el-form-item label="活动封面设置" :prop="formData.poster_type == 1 ? 'poster_id' : 'absolute_url'">
                <el-radio-group v-model="formData.poster_type" @change="changeRadio">
                    <el-radio :label="0">封面模版</el-radio>
                    <el-radio :label="1">海报库</el-radio>
                    <el-radio :label="2">自定义</el-radio>
                </el-radio-group>
                <div>
                    <el-button v-if="formData.poster_type == 1" size="small" @click="onPoster">选择海报</el-button>
                    <el-upload
                        v-if="formData.poster_type == 2"
                        :on-change="beforeAvatarUpload"
                        accept=".jpg,.png,.JPG"
                        :show-file-list="false"
                        :limit="1"
                        :auto-upload="false">
                        <el-button size="small">选择图片</el-button>
                    </el-upload>
                </div>
            </el-form-item>
            <el-form-item label="领取按钮文案" prop="receive_desc">
                <el-input
                    v-model="formData.receive_desc"
                    class="w400"
                    maxlength="8"
                    show-word-limit
                    placeholder="请输入" />
            </el-form-item>
        </el-form>
        <div class="poster_box">
            <ActivityPhone :form-data="formData" />
        </div>
        <ChoosePoster ref="ChoosePosterRef" @save="getPoster" />
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref, defineExpose, defineProps, defineEmits } from 'vue';
import type { FormInstance } from 'element-plus';
import { ElMessage } from 'element-plus';
import { uploadFile2 } from '@/api/common';
import ChoosePoster from '@/view/content/highMaterial/poster/components/ChoosePoster.vue';
import ActivityPhone from '@/components/zw/phonePreview/activityPhonePreview/redEnvelopes/index.vue';

const ChoosePosterRef: any = ref(null);
const selectedPoster: any = ref(null); // 维护选择海报数据
const upPoster: any = ref(null); // 维护上传海报

interface Props {
    pageType: any;
}
const props = withDefaults(defineProps<Props>(), {
    pageType: ''
});
const emit = defineEmits(['submit']);
const formRef = ref<FormInstance>();
const formData = ref({
    page_name: '',
    poster_type: 0,
    poster_id: '',
    absolute_url: 'https://static.scrm.keyid.cn/assets/images/web-pc/WechatIMG792.png',
    receive_desc: ''
});
const formRules = reactive({
    page_name: [{ required: true, message: '请输入页面标题', trigger: 'blur' }],
    poster_id: [{ required: false, message: '请选择海报图片', trigger: 'change' }],
    absolute_url: [{ required: false, message: '请上传海报图片', trigger: 'blur' }],
    receive_desc: [{ required: true, message: '请输入领取按钮文案', trigger: 'blur' }]
});
const changeRadio = (value: any) => {
    const defaultImg = 'https://static.scrm.keyid.cn/assets/images/web-pc/WechatIMG792.png';
    if (value === 0) {
        formData.value.absolute_url = defaultImg;
    } else if (value === 1) {
        formData.value.absolute_url = selectedPoster.value || defaultImg;
    } else {
        formData.value.absolute_url = upPoster.value || defaultImg;
    }
};
// 选择海报库
const onPoster = () => {
    ChoosePosterRef.value.appDialog.visible = true;
};
const getPoster = (val: any) => {
    formData.value.poster_id = val.idList[0];
    formData.value.absolute_url = val.list[0].poster_url;
    selectedPoster.value = val.list[0].poster_url;
    // postersURL.value = val.list[0].poster_url;
};
// 上传海报
const uploadFun = async (file: any, fileName: string, isSubmit: false) => {
    const res = await uploadFile2({ file, fileName });
    formData.value.code = res.code;
    formData.value.absolute_url = res.url;
    upPoster.value = res.url;
};
// 本地上传
const beforeAvatarUpload = (rawFile: any) => {
    if (rawFile.size / 1024 / 1024 > 10) {
        ElMessage.error('上传图片大小不能超过10M');
        return false;
    }
    uploadFun(rawFile.raw, rawFile.name);
};
const onSubmit = async () => {
    if (!formRef.value) return;
    await formRef.value.validate((valid: any, fields: any) => {
        if (valid) {
            emit('submit');
        } else {
            ElMessage.warning(Object.values(fields)[0][0].message);
        }
    });
};
// 编辑时区分海报类型并将图片链接维护到变量中，1——选择海报，2——上传海报
const getPosterUrl = (type: number, url: string) => {
    if (type === 1) {
        selectedPoster.value = url;
    } else if (type === 2) {
        upPoster.value = url;
    }
};
defineExpose({
    formData,
    onSubmit,
    getPosterUrl
});
</script>
<style lang="scss" scoped>
.posters_container {
    display: flex;

    .w400 {
        width: 400px;
    }

    .el-form {
        flex: 1;
    }

    .poster_box {
        display: flex;
        justify-content: center;
        padding: 0 24px 0 48px;
        margin-bottom: 20px;
        font-size: 10px;

        .poster_right_box {
            width: 216px;
            height: 410px;
            padding: 9px;
            background-color: #f3fafb;
            border: solid 2px #d2d8db;

            .title_box {
                display: flex;
                align-items: center;
                height: 26px;
                padding-left: 7px;
                background: #fff;
                border-radius: 13px 13px 0 0;

                .title_r {
                    flex: 1;
                    padding-right: 14px;
                    text-align: center;
                }
            }

            .content {
                position: relative;
                width: 100%;
                height: 384px;
                background-color: #fff;
                border-radius: 0 0 12px 12px;
                background-size: cover;

                .default_bg {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;

                    // border-radius: 0 0 12px 12px;
                    // background: url('@/assets/smartMarketing/drainage/redEnvelopes/red_pull_bg.png') no-repeat;
                    // background-size: cover;
                    z-index: 1;
                }

                .btn_box {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    position: absolute;
                    bottom: 48px;
                    left: 71px;
                    width: 74px;
                    border-radius: 50%;
                    height: 74px;
                    background-color: #fad49f;
                    color: #ac7221;
                    z-index: 9;
                }

                .avatar_box {
                    width: 50px;
                    height: 50px;
                    position: absolute;
                    top: 572px;
                    left: 17px;
                    cursor: move;

                    img {
                        width: 100%;
                        height: 100%;
                        background-color: pink;
                    }
                }

                .nickname_box {
                    position: absolute;
                    top: 588px;
                    left: 77px;
                    cursor: move;
                }

                .qrcode_box {
                    position: absolute;
                    left: 265px;
                    top: 550px;
                    z-index: 3;
                    cursor: move;
                    width: 80px;
                    height: 80px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }

    .oneText {
        font-size: 29px;
    }
}

img[src=''],
img:not([src]) {
    opacity: 0;
}
</style>
